<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Cool Book网上书店</title>
		<link rel="stylesheet" href="css/site.css" />
		<link rel="stylesheet" href="css/glyphicon.css" />
		<link rel="stylesheet" href="css/cart.css"/>
	</head>
	<body>
		<header></header>
		
		<section>
			<h2>您的购物车</h2>
			<table cellspacing="0">
				<thead>
					<tr>
						<th>书名</th>
						<th>数量</th>
						<th>单价</th>
						<th>小计</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
				<tfoot>
					<tr>
						<td colspan="3">总价</td>
						<td id="sum"></td>
						<td></td>
					</tr>
				</tfoot>
			</table>
			<div class="buttons">
				<a href="index.html" class="btn blue">继续购物</button>
				<a href="order.html" class="btn blue">结账</a>
			</div>
		</section>
		
		<footer></footer>
		
		<script src="js/eventUtil.js"></script>
		<script src="js/cookie.js"></script>
		<script src="js/cart.js"></script>
		<script src="js/msgbox.js"></script>
		<script type="text/javascript" src="js/util.js" ></script>
		<script type="text/javascript" src="js/pageInit.js" ></script>
		<script>
			var items = cart.getItems();
			var tbody = document.getElementsByTagName("tbody")[0];
			for(var i=0;i<items.length;i++){
				var tr = document.createElement("tr");
				
				var title = document.createElement("td");
				title.innerHTML = items[i].title;
				tr.appendChild(title);
				
				var quantity = document.createElement("td");
				quantity.innerHTML = items[i].quantity;
				tr.appendChild(quantity);
				
				var price = document.createElement("td");
				price.innerHTML = "￥" + items[i].price;
				tr.appendChild(price);
				
				var lineTotal = document.createElement("td");
				lineTotal.innerHTML = "￥" + items[i].price * items[i].quantity;
				tr.appendChild(lineTotal);
				
				var op = document.createElement("td");
				var remove = document.createElement("button");
				remove.innerHTML = "移除";
				remove.setAttribute("class", "btn orange");
				remove.setAttribute("onclick",  'removeItem(event,' + items[i].id + ')');
				op.appendChild(remove);
				tr.appendChild(op);
				
				tbody.appendChild(tr);
			}
			document.getElementById("sum").innerHTML = "￥" + cart.sum();
			
			function removeItem(event, id){
				//var src = event.srcElement;
				event = EventUtil.getEvent(event);
				var src = EventUtil.getTarget(event); 
				msgBox.confirm("警告","确实要删除该项吗？", function(result){
					if(result){
						// 更新cookie
						cart.removeFromCart(id);
						// 删除此行
						var tr = src.parentElement.parentElement;
						tbody.removeChild(tr);
						// 更新总价格
						document.getElementById("sum").innerHTML = "￥" + cart.sum();
						// 更新购物车概述
						updateCartSummary();
					}
				});
			}
			
		</script>
	</body>
</html>
